
<template>
    <div>
        <div class="common-layout">
            <el-container>
                <el-container>
                    <el-header>
                        <!-- 查询条件 -->
                        <div style="width: 100%;padding-top: 20px;border: 1px solid red">
                            <el-form :inline="true" :model="ShowData" class="demo-form-inline" style="text-align: center;">
                                <el-form-item label="操作时间">
                                    <el-date-picker v-model="ShowData.value1" type="datetime" placeholder="请选择操作时间"
                                        format="YYYY/MM/DD hh:mm:ss" value-format="YYYY-MM-DD h:m:s a" />
                                </el-form-item>
                                <el-form-item label="用户">
                                    <el-input v-model="ShowData.LogBy" placeholder="请输入网格名称" clearable />
                                </el-form-item>
                                <el-form-item>
                                    <el-button type="success" @click="fetchData">搜索</el-button>
                                    <el-button type="warning" @click="chengzho">重置</el-button>
                                </el-form-item>
                            </el-form>
                        </div>
                    </el-header>



                    <el-main>
                        <br /><br />
                        <!--列表 -->
                        <el-table :data="tableData" style="width: 100%; border: 1px solid red" :row-class-name="tableData">
                            <el-table-column type="index" label="序号" width="100px" align="center" />
                            <el-table-column prop="logNum" label="日志编号" />
                            <el-table-column prop="logDate" label="操作时间" />
                            <!-- <el-table-column prop="subordinate" label="所属区域">
                            <template v-slot="scope">
                                <span v-if="scope.row.owning_region == 1">呼兰街道</span>
                                <span v-if="scope.row.owning_region == 2">兰河街道</span>
                                <span v-if="scope.row.owning_region == 3">利民街道</span>
                            </template>
                        </el-table-column> -->
                            <el-table-column prop="logBy" label="操作人" />
                            <el-table-column prop="logContent" label="操作内容" />
                            <!--<el-table-column label="操作">
                                <template v-slot="scope">
                                    <el-button type="primary" @click="handleEdit(scope.row.id)">编辑</el-button>
                                    <el-button type="danger" @click="handleDelete(scope.row.id)">删除</el-button>
                                </template>
                            </el-table-column>-->
                        </el-table>

                        <div class="demo-pagination-block">
                            <div class="demonstration">All combined</div>
                            <el-pagination v-model:current-page="pageIndex" v-model:page-size="pageSize"
                                :page-sizes="[10, 15, 20, 25]" layout="total, sizes, prev, pager, next, jumper"
                                :total="totalCount" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
                        </div>

                    </el-main>
                </el-container>
            </el-container>
        </div>
        <!-- 分页 -->
    </div>
</template>


<script setup lang="ts">
//引入axios
import axios from 'axios';
//引入消息框 添加成功之后的提示
import { ElMessage, ElMessageBox } from 'element-plus'
//引入组件
import { ref, reactive, onMounted, watch } from "vue";

//日期控件
const defaultTime = new Date(2000, 1, 1, 12, 0, 0)


//查询的重置按钮
const chengzho = () => {
}


//定义显示的集合
const tableData = ref([])
//定义分页需要的参数
const pageIndex = ref(1)
const pageSize = ref(10)
const totalCount = ref(0)
const pageCount = ref(0)

//条件查询的表单
const ShowData = reactive({
    LogBy: "",  //查询条件 用户
    value1: "",
});


//分页方法
const handleSizeChange = (val: number) => {
    pageSize.value = val;
    fetchData();
}
const handleCurrentChange = (val: number) => {
    pageIndex.value = val;
    fetchData();
}


//异步显示列表.LogBy.LogBy
const fetchData = async () => {
    try {
        //response                       http://10.31.60.18:8000/GetLiGriddingRout/api/LogManage/ShowLogManage
        const res = await axios.get('http://47.95.178.186:8000/GetLiGriddingRout/api/LogManage/ShowLogManage', {
            params: {
                PageIndex: pageIndex.value,
                PageSize: pageSize.value,
                LogDate: ShowData.value1,
                LogBy:ShowData.LogBy,
                //AssemTypeNum: ShowData.AssemTypeNum,
                //Owning_region: ShowData.Owning_region || 0,
            }
        })
        console.log(ShowData.value1)
        tableData.value = res.data.data
        totalCount.value = res.data.totalCount
        pageCount.value = res.data.pageCount
    } catch (error) {
        console.error(error)
    }
}




//首次加载调用显示页面
onMounted(() => {
    fetchData();
})

</script>

<style lang="scss" scoped></style>  